<template>
  <div class="deptDialog-container">
    <el-dialog
     :visible="deptVisible"
     :title="title"
     :close-on-click-modal="false"
     @close="handleClose"
     width="50%"
    >
      <el-form
        ref="deptInfoForm"
        :model="Form"
        :rules="rule"
        label-width="100px"
      >
        <el-form-item label="上级部门" prop="id">
          <el-cascader
            v-model="Form.id"
            :options="cascadeOptions"
            :props="cascadeProps"
            @change="handleChange"
            style="width: 100%;"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input v-model="Form.deptName" placeholder="请输入部门名称"/>
        </el-form-item>
        <el-form-item label="状态" >
          <el-switch v-model="Form.status" inline-prompt active-text="启用" inactive-text="禁用"></el-switch>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="Form.remark" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {deptData} from '@/mock/jsModule/system'

export default {
  name: 'userDialog',
  props:{
    title:{
      type: String,
      default: '部门信息',
    },
    dialogVisible:{
      type: Boolean,
      default: false,
    },
    deptName:{
      type: String,
      default: '研发部',
    },
    rowInfo:{
      type: Object,
      default: () =>{}
    }
  },
  data(){
    return{
      deptVisible: false,
      Form: {
        id: null,
        deptName: null,
        status: false,
        remark: null,
      },
      rule:{
        id: [{ required: true, message: '请选择上级部门', trigger: 'change' }],
        deptName: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
      },
      cascadeProps:{
        value: 'id',
        label: 'deptName',
        // 在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。
        // checkStrictly 启用该功能后，可让父子节点取消关联，选择任意一级选项。
        checkStrictly:true
      },
    }
  },
  watch:{
    dialogVisible:{
      deep: true,
      handler(val){
        this.deptVisible = val
      }
    },
    rowInfo:{
      deep: true,
      handler(val){
        if(val.deptName){
          Object.keys(val).forEach(key =>{
            this.Form[key] = val[key]
          })
        }
      },
    }
  },
  computed:{
    cascadeOptions(){
      return deptData
    }
  },
  methods:{
    handleChange(){

    },
    resetForm(){
      Object.keys(this.Form).forEach(key =>{
        if(key == 'status'){
          this.Form[key] = false
        }else{
          this.Form[key] = null
        }
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible',false)
      this.$refs['deptInfoForm'].resetFields()
      this.resetForm()
    },
    handleSubmit () {
      if(this.title.indexOf('新增') > -1){
        this.$emit('closeDialog', false)
        // 编写具体的新增代码
        this.$message.success('新增成功')
      }else{
        this.$emit('closeDialog', false)
        // 编写具体的编辑代码
        this.$message.success('编辑成功')
      }
      this.$refs['deptInfoForm'].resetFields()
      this.resetForm()
    }
  },
}
</script>

<style lang="scss" scoped>
.deptDialog-container{
  .el-dialog__wrapper{
    text-align: left;
    .el-dialog{
      margin-top: 100px;
    }
  }
}
</style>
<style lang="scss">
.el-cascader-menu__wrap{
  margin-right: -5px !important;
}
</style>
